<!DOCTYPE html>
<!-- 文档类型声明，说明这个文档是一个html5格式的文档  -->
<html>
<!-- 头部 -->

<head>
	<!-- 页面编码集    utf（unicode transformation format）-8: 一个汉字三个字节编码
    GBK即“国标”、“扩展”汉语拼音的第一个字母，英文名称：Chinese Internal Code Specification）
    GBK(21886)或GB2312(6763): 一个汉字两个字节编码  -->
	<meta charset="utf-8"/>

	<!-- 定义页面的标题 -->
	<title>源辰-零食网</title>

	<!-- 定义页面logo  ref：reference 参照、引用
        rel:relationship的缩写 ，引用的这个外部资源跟这个页面的关系 -->
	<link href="images/yc.png" type="image/x-icon" rel="shortcut icon"/>

	<!-- 引入外部样式表  -->
	<link href="css/index.css" type="text/css" rel="stylesheet"/>
</head>

<!-- 身体部分，真正的页面内容部分，这里面的内容会在浏览器中显示 -->

<body>
<!-- 页面顶部部分 -->
<header id="header">
	<div class="htitle">
		<!-- href:点击后要跳转的页面地址
            title: 鼠标移上去的时候显示的提示信息
            target: 新页面的打开位置
        -->
		<a href="#" title="位置" target="_blank" class="location">衡阳</a>

		<div class="header_info">
			<!-- 登录信息 -->
			<div class="login_info">
				<a href="login.html" title="点击登录">您好，请先登录</a>
				<a href="register.html" title="点击注册">免费注册</a>
			</div>

			<!-- 个人信息 -->
			<div class="person_info">
				<span>|</span>
				<a href="order.html" target="_blank" title="历史订单">我的订单</a>
				<span>|</span>
				<a href="" target="_blank">我的小吃</a>
				<span>|</span>
				<a href="" target="_blank">客服服务</a>
				<span>|</span>
				<a href="" target="_blank">个人中心</a>
			</div>
		</div>
	</div>

	<!-- 搜索区域 -->
	<div class="search">
		<!-- 搜索区域左边的logo部分  -->
		<div class="search_left">
			<a href="index.html" title="首页">
				<img src="images/logo.png" width="260px" height="90px"/>
			</a>
		</div>

		<div class="search_right">
			<!-- 搜索框和我的购物车部分 -->
			<div class="search_top">
				<div class="search_div">
					<input type="search" class="search_ipt" name="key" placeholder="请输入要搜索的内容"/>
					<input type="button" class="search_btn" value="搜索"/>
				</div>

				<div class="buycat">
					<b>12</b>
					<a href="#" target="_blank">我的购物车</a>
				</div>
			</div>

			<!-- 商品类型导航 -->
			<div class="search_bottom">
				<a href="#" class="selected">全部</a>
				<a href="#" v-for="item in types">{{item.tname}}</a>
			</div>
		</div>
	</div>
</header>
<!-- 顶部下面的轮播图部分 -->
<div class="slide" id="slide">
	<img src="images/slide01.jpg"/>
	<img src="images/slide02.jpg"/>
	<img src="images/slide03.jpg"/>
	<img src="images/slide04.jpg"/>
	<img src="images/slide05.jpg"/>
</div>

<!-- 中间内容区 -->
<article id="app">
	<div class="view_title">
		<a href="#">价格</a>
		<input type="number" class="price_ipt" min="1"/>
		<span>-</span>
		<input type="number" class="price_ipt" min="1"/>
	</div>

	<div class="view_items">
		<ul>
			<li v-for="item in products">
				<a href="detail.html" target="_blank">
					<img :src="item.pic" :title="item.gname"/>
					<span>{{item.gname}}</span>
				</a>
				<div>
					<span>&yen;{{item.price}}</span>
					<span> / {{item.weight}}</span>
					<span class="buy"></span>
				</div>
			</li>
		</ul>
	</div>

	<div class="page_info" id="page_info">
		<a href="javascript:void(0)" @click="findByPage(item, $event)" :class="{active: item == 1}" v-for="item in totalPage">{{item}}</a>
	</div>
</article>

<!-- 底部版权区 -->
<footer>
	<div class="foot_link">
		<a href="">关于我们</a><span>|</span>
		<a href="">联系我们</a><span>|</span>
		<a href="">招聘广告</a><span>|</span>
		<a href="">友情链接</a><span>|</span>
		<a href="">公司介绍</a>
	</div>
	<p>CopyRight &copy; 2022 <a class="copy" href="http://www.hyycinfo.com" target="_blank">
		衡阳市源辰信息科技有限公司</a> All Rights Reserverd</p>
	<p>电话：0737-8355998 湘ICP备2022454545号-1</p>
</footer>
</body>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript" src="js/qs.js"></script>
<script>
	window.onload = function () { // 当页面加载完成执行这个函数
		var imgs = document.getElementById("slide").getElementsByTagName("img"); // 获取所有的轮播图片，返回的是一个数组
		var len = imgs.length; // 获取图片的数量
		var index = 0; // 记录当前显示的是第几张图片
		setInterval(function () { // 设置一个定时器，每隔2000毫秒执行函数一次
			index = ++index % len;
			for (var i = 0; i < len; ++i) {
				if (i == index) {
					imgs[i].style.display = "block"; // 显示
				} else {
					imgs[i].style.display = "none"; // 不显示
				}
			}
		}, 2000);
	}

	let header = new Vue({
		el: "#header",
		data: {
			types: [], // 存放从服务器获取到的类型信息
		},
		mounted: function () {
			// 发送请求获取类型信息
			axios.get("type/findAll").then(rt => {
				// rt.status说明请求发送成功   rt.data.code == 200 说明后台数据回送成功
				if (rt.status == 200 && rt.data.code == 200) {
					this.types = rt.data.data;
					return;
				}
			})
		}
	})

	let page = 1;
	let rows = 2;
	let app = new Vue({
		el: "#app",
		data: {
			total: 0,
			totalPage: 1, // 总页数
			products: [], // 存放从服务器端获取到的类型信息
		},
		mounted: function() {
			// 发送请求获取第一页的商品信息
			axios.post("product/findFist", qs.stringify({page: page, rows: rows})).then(rt => {
				if(rt.status == 200 && rt.data.code == 200) {
					this.products = rt.data.data.rows;
					this.total = rt.data.data.total;
					this.totalPage = Math.ceil(this.total / rows);
					return;
				}
			})
		},
		methods: {
			findByPage: function(index, obj) {
				page = index;
				$("#page_info>a").removeClass("active"); // 先移除所有a标签上的类样式
				$(obj.currentTarget).addClass("active");

				// 分页查询
				axios.post("product/finds", qs.stringify({page: page, rows: rows})).then(rt => {
					if(rt.status == 200 && rt.data.code == 200) {
						this.products = rt.data.data;
						return;
					}
				})
			}
		}
	})
</script>
</html>